<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="map"></div>
  </div>
</template>

<script>
import { getProvinceMapInfo } from "@/utils/map";
export default {
  created() {
    // 在组件创建完成后，进行回调函数注册
    this.$socket.registerCallBack("mapData", this.getData);
  },
  mounted() {
    // 初始化Charts
    this.initChart();
    // 获取数据
    // this.getData();
    // 告诉服务器，我现在需要数据
    this.$socket.send({
      action: "getData",
      socketType: "mapData",
      chartName: "map",
      value: "",
    });
    // 适配
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    this.$socket.unRegisterCallBack("mapData");
  },
  data() {
    return {
      // 图表的实例对象
      chartInstance: null,
      // 中国地图数据
      chinaMapData: null,
      // 从服务器中获取的所有数据
      allData: null,
      // 获取省份矢量地图数据缓存
      cityMapData: {},
    };
  },
  methods: {
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.map, "chalk");
      // 获取中国地图矢量数据
      if (!this.chinaMapData) {
        const { data: res } = await this.$http.get("/map/china");
        this.chinaMapData = res;
      }
      // 注册地图数据
      this.$echarts.registerMap("china", this.chinaMapData);

      const initOption = {
        title: {
          text: "▎商家分布",
          left: 20,
          top: 20,
        },
        // 图例位置和形状
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          bottom: "5%",
          itemStyle: {
            areaColor: "#2E72BF",
            borderColor: "#333",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
      };
      this.chartInstance.setOption(initOption);
      this.chartInstance.on("click", async (arg) => {
        // 通过工具函数拿到点击的地图对应的中文拼音(key),和拼接出需要的文件路径(path)
        const ProvinceInfo = getProvinceMapInfo(arg.name);
        if (!this.cityMapData[ProvinceInfo.key]) {
          // 不存在： 发送请求,获取点击的地图的矢量数据
          const { data: res } = await this.$http.get(ProvinceInfo.path);
          // 把请求到的数据保存下来
          this.cityMapData[ProvinceInfo.key] = res;
          // 注册点击的地图
          this.$echarts.registerMap(ProvinceInfo.key, res);
        }
        // 设置最新的配置项
        const changeOption = {
          geo: {
            map: ProvinceInfo.key,
          },
        };
        // 赋值给 echarts实例
        this.chartInstance.setOption(changeOption);
      });
    },
    async getData(res) {
      // 获取地图的散点数据
      // const { data: res } = await this.$http.get("map");
      this.allData = res;
      this.updateChart();
    },
    updateChart() {
      // 图例的数据
      // 图例的数据
      let legendArr = this.allData.map((item) => {
        return item.name;
      });
      const seriesArr = this.allData.map((item) => {
        // 如果在地图中显示散点数据，所以要给散点的图表添加一个配置 coordinateSystem:geo
        return {
          type: "effectScatter",
          name: item.name,
          data: item.children,
          coordinateSystem: "geo",
          rippleEffect: {
            number: 3,
            period: 2,
            scale: 8,
            brushType: "stroke",
          },
        };
      });
      let dataOption = {
        legend: {
          data: legendArr,
        },
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    // 浏览器大小发生变化会调用此方法
    screenAdapter() {
      let titleFontSize = (this.$refs.map.offsetWidth / 100) * 3.6;
      let adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2.5,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 回到中国地图
    revertMap() {
      const revertOption = {
        geo: {
          map: "china",
        },
      };
      this.chartInstance.setOption(revertOption);
    },
  },
};
</script>

<style></style>
